<template>
  <div class="h-screen flex flex-col relative overflow-hidden">
    <!-- 视频播放区域 -->
    <section
      class="w-full relative h-1/3 flex-shrink-0"
      :class="isPortrait ? 'z-0' : 'z-20'"
    >
      <lazy-video
        :video-src="videoUrl"
        :poster="videoPoster"
        :autoplay="true"
        :is-portrait="isPortrait"
        class="w-full h-full"
      />
    </section>
    <div
      v-if="playerStore.isPlayerEnd"
      class="w-full h-1/4 flex justify-center items-center bg-black/50 bg-opacity-70 text-white z-50 absolute top-0 text-3xl pointer-events-auto"
    >
      {{ "课程已结束" }}
    </div>
    <OnlineCount
      v-if="courseStore.courseData.openLivePeopleNum === 1"
      :count="courseStore.courseWatchData?.onlineCount || 0"
      class="absolute top-4 right-4 z-20"
    />

    <MemberId
      :member-id="userStore.user?.buyerUserId"
      class="absolute top-4 left-4 z-20"
    />
    <!-- 课题互动/答题区域：横屏时用tab切换 -->
    <section
      v-if="
        !isPortrait &&
        courseStore.courseData &&
        (courseStore.courseData?.openInteraction === 1 ||
          courseStore.courseData?.questionNum > 0)
      "
      class="bg-gray-100 rounded-t-lg p-4 transition-all duration-300 z-10 flex-grow overflow-y-auto"
    >
      <van-tabs
        v-model:active="activeTab"
        class="flex-grow bg-gray-100 rounded-t-lg overflow-y-auto"
      >
        <van-tab
          title="课题互动"
          name="interaction"
          v-if="courseStore.courseData?.openInteraction === 1"
        >
          <Interaction :is-interaction-enabled="isInteractionEnabled" />
        </van-tab>
        <van-tab
          title="答题"
          name="question"
          v-if="courseStore.courseData?.questionNum > 0"
        >
          <div
            v-if="
              courseStore.courseWatchData.isAnswer !== 1 &&
              !questionStore.isVisible &&
              courseStore.courseWatchData.answerRewardState !== 3
            "
            class="text-center text-gray-500 text-sm mt-4"
          >
            答题未开始
          </div>
          <div
            v-if="
              !questionStore.isVisible &&
              courseStore.courseWatchData.answerRewardState == 3
            "
            class="text-center text-gray-500 text-sm mt-4"
          >
            答题时间已过
          </div>
          <div
            v-if="
              courseStore.courseWatchData.isAnswer == 1 &&
              !questionStore.isVisible
            "
            class="text-center text-gray-500 text-sm mt-4"
          >
            答题已结束
          </div>
          <Question />
        </van-tab>
      </van-tabs>
    </section>
    <template v-else-if="courseStore.courseData && isPortrait">
      <Interaction
        :styleMode="'cover'"
        :is-interaction-enabled="isInteractionEnabled"
      />
    </template>
    <InteractionMenu
      v-if="!playerStore.isFullScreen"
      class="fixed bottom-20 right-1 z-50"
      :style-mode="isPortrait ? 'cover' : ''"
    ></InteractionMenu>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import LazyVideo from "@/components/lazy-video/index.vue"; // 确保路径正确
import Interaction from "@/components/Interaction.vue"; // 使用封装的互动组件
import "@/utils/tencent-im";
import { useCourseData, useQuestion } from "@/store/useCourse";
import { usePlayerStore } from "@/store/usePlayer";
import Question from "./Question.vue";
import { useUserStore } from "@/store/useUserStore";
import { useLocationParams } from "@/store/useLocationStore";
import OnlineCount from "@/views/LiveNew/components/OnlineCount.vue";
import MemberId from "@/components/MemberId.vue";
const courseStore = useCourseData();
// 视频地址和封面图
// const videoUrl = ref("./test.mp4"); // 替换为实际视频地址
const videoUrl = ref(courseStore.courseData.video.link); // 替换为实际视频地址
const videoPoster = ref("https://example.com/poster.jpg"); // 替换为实际封面图地址

// 是否为竖屏模式
// const isPortrait = ref(false); // 根据实际逻辑动态设置
const playerStore = usePlayerStore();
const isPortrait = computed(() => courseStore.courseData.screenType === 0);
const isInteractionEnabled = computed(
  () => courseStore.courseData.openInteraction === 1
);
const activeTab = ref("interaction");
const questionStore = useQuestion();
watch(
  () => questionStore.isVisible,
  (newVal, oldVal) => {
    if (newVal && newVal == oldVal) {
      return;
    }
    if (newVal) {
      activeTab.value = "question";
    } else {
      activeTab.value = "interaction";
    }
  }
);
const userStore = useUserStore();
// const locationParams = useLocationParams();
// locationParams.setParam("shareUserId", userStore.user.buyerUserId.toString());
</script>
